<template>
  <ElDialog
    v-model="dialogVisible"
    :title="isEdit ? '编辑仓库' : '新增仓库'"
    width="600px"
    :before-close="handleClose"
  >
    <ElForm
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
    >
      <ElRow :gutter="20">
        <ElCol :span="12">
          <ElFormItem label="仓库编号" prop="warehouseNo">
            <ElInput
              v-model="formData.warehouseNo"
              placeholder="请输入仓库编号"
              :disabled="isEdit"
            />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="仓库名称" prop="warehouseName">
            <ElInput
              v-model="formData.warehouseName"
              placeholder="请输入仓库名称"
            />
          </ElFormItem>
        </ElCol>
      </ElRow>

      <ElRow :gutter="20">
        <ElCol :span="12">
          <ElFormItem label="仓库类型" prop="warehouseType">
            <ElSelect
              v-model="formData.warehouseType"
              placeholder="请选择仓库类型"
              style="width: 100%"
            >
              <ElOption label="普通仓库" value="1" />
              <ElOption label="冷藏仓库" value="2" />
              <ElOption label="危险品仓库" value="3" />
              <ElOption label="保税仓库" value="4" />
            </ElSelect>
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="状态" prop="status">
            <ElRadioGroup v-model="formData.status">
              <ElRadio label="1">启用</ElRadio>
              <ElRadio label="0">禁用</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
        </ElCol>
      </ElRow>

      <ElFormItem label="仓库地址" prop="address">
        <ElInput
          v-model="formData.address"
          placeholder="请输入仓库地址"
          type="textarea"
          :rows="2"
        />
      </ElFormItem>

      <ElRow :gutter="20">
        <ElCol :span="12">
          <ElFormItem label="联系人" prop="contact">
            <ElInput v-model="formData.contact" placeholder="请输入联系人" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="联系电话" prop="phone">
            <ElInput v-model="formData.phone" placeholder="请输入联系电话" />
          </ElFormItem>
        </ElCol>
      </ElRow>

      <ElFormItem label="备注">
        <ElInput
          v-model="formData.remark"
          placeholder="请输入备注"
          type="textarea"
          :rows="3"
        />
      </ElFormItem>
    </ElForm>

    <template #footer>
      <ElButton @click="handleClose">取消</ElButton>
      <ElButton type="primary" @click="handleConfirm" :loading="loading">
        确定
      </ElButton>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import type { WMS } from "@/types/wms";

defineOptions({ name: "WmsWarehouseDialog" });

// 定义属性
interface Props {
  visible: boolean;
  initialData?: Partial<WMS.WarehouseInfo>;
  isEdit?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  initialData: () => ({}),
  isEdit: false,
});

// 定义事件
const emit = defineEmits<{
  "update:visible": [value: boolean];
  confirm: [data: WMS.WarehouseInfo];
}>();

// 响应式数据
const dialogVisible = ref(false);
const loading = ref(false);
const formRef = ref<FormInstance>();

// 表单数据
const formData = reactive<Partial<WMS.WarehouseInfo>>({
  warehouseNo: "",
  warehouseName: "",
  warehouseType: "",
  address: "",
  contact: "",
  phone: "",
  status: "1",
  remark: "",
});

// 表单验证规则
const formRules: FormRules = {
  warehouseNo: [{ required: true, message: "请输入仓库编号", trigger: "blur" }],
  warehouseName: [
    { required: true, message: "请输入仓库名称", trigger: "blur" },
  ],
  warehouseType: [
    { required: true, message: "请选择仓库类型", trigger: "change" },
  ],
  address: [{ required: true, message: "请输入仓库地址", trigger: "blur" }],
  contact: [{ required: true, message: "请输入联系人", trigger: "blur" }],
  phone: [
    { required: true, message: "请输入联系电话", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
};

// 监听visible变化
watch(
  () => props.visible,
  (val) => {
    dialogVisible.value = val;
    if (val) {
      // 重置表单数据
      Object.assign(formData, {
        warehouseNo: "",
        warehouseName: "",
        warehouseType: "",
        address: "",
        contact: "",
        phone: "",
        status: "1",
        remark: "",
        ...props.initialData,
      });
    }
  },
);

// 监听dialogVisible变化
watch(dialogVisible, (val) => {
  emit("update:visible", val);
});

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false;
  formRef.value?.resetFields();
};

// 确认提交
const handleConfirm = async () => {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();
    loading.value = true;
    emit("confirm", formData as WMS.WarehouseInfo);
  } catch (error) {
    console.error("表单验证失败:", error);
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped>
:deep(.el-dialog__body) {
  padding: 20px;
}
</style>
